<template>
  <div class="baspoke">
    <livheade :logo="logo2"></livheade>
    <div class="baspoke-login">
      <div class="baspoke-body">
        <img src="../assets/error.png" class="error" >
        <h1>免费预约超人气在线外教体验课</h1>
        <p class="xian"></p>
        <div class="phone">
          <input placeholder="请输入你常用的手机号码" type="number" v-model="phone"/>
        </div>
        <div class="code">
          <input placeholder="验证码" type="number" v-model="code"/>
          <button class="send_btn" @click="sendsms">{{psms}}</button>
        </div>
        <button @click="submitbtn">提交预约</button>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'

  import livheade from '@/components/header/heade'

  export default {
    name: 'bespoke',
    components: {livheade},
    data () {
      return {
        logo2: false,
        phone: '',
        code: '',
        psms: '发送验证码',
        disp: true
      }
    },
    methods: {
      sendsms () {
        var phone = this.phone
        if (!(/^1[34578]\d{9}$/.test(phone))) {
          alert('手机号码有误，请重填')
          return false
        }
        var that = this
        if (this.psms === '发送验证码') {
          this.psms = 60
          $('.send_btn').css({'background-color': '#b5b5b5', 'text-decoration': 'none'})
          $.ajax({
            type: 'POST',
            url: '/send_sms?responseType=ajax&phone=' + phone,
            ContentType: 'application/x-www-form-urlencoded',
            success: function (data) {
              var timer = setInterval(function () {
                if (that.psms === '0' || that.psms === 0) {
                  clearInterval(timer)
                  $('.send_btn').css({'background-color': '#48cbf7'})
                  that.psms = '发送验证码'
                } else {
                  that.psms = parseInt(that.psms) - 1
                }
              }, 1000)
            },
            error: function () {
              that.psms = '发送验证码'
              alert('发送失败')
            }
          })
        }
      },
      submitbtn () {
        var code = this.code
        var phone = this.phone
        if (code === '' || code.length !== 4) {
          alert('请输入4位验证码')
          return false
        }
        // {"succ":true,"messages":[],"status":0}
        var that = this
        $.get('/savePhone?responseType=ajax&phone=' + phone + '&code=' + code, function (rst) {
          if (rst && rst.succ) {
            that.$router.push('tankyou')
            // self.location.href = '/orderform_succ';
          } else if (rst && rst.err) {
            $('.error').css({'display': 'block'})
            setTimeout(function () {
              $('.error').css({'display': 'none'})
            }, 2000)
          }
        }, 'json')
      }
    }
  }
</script>
<style scoped lang="scss">
  .error {
    display: none;
    width: 109px;
    height: 77px;
    -webkit-box-sizing: border-box;
    /* box-sizing: border-box; */
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin: -51.5px -53.5px; */
    t: translate(-50%,-50%);
    transform: translate(-50%, -50%);
  }

  $bgcolor: #48cbf7 ;
  .baspoke {
    margin: 0 -12px;
    height: -webkit-fill-available;
    overflow: hidden;
    padding-top: 44px;
    .baspoke-login {
      height: -webkit-fill-available;
      padding: 38px 32px 0;
      background-color: $bgcolor;
      text-align: center;
      .baspoke-body {
        position: relative;
        padding: 33px 0;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        background-color: white;
        .xian {
          width: 250px;
          height: 1.5px;
          background-color: $bgcolor;
          margin: 17.5px auto 21px;
        }
        h1 {
          font: {
            size: 19px;
            family: "Source Code Pro";
            weight: bold;
          }
          color: $bgcolor;
        }
        input {
          height: 37px;
          padding-left: 12px;
        }
        .phone {
          input {
            width: 250px;
            box-sizing: border-box;
          }
        }
        .code {
          box-sizing: border-box;
          width: inherit;
          margin: 15px auto 22px;
          display: flex;
          flex-flow: row nowrap;
          margin: 15px auto 22px;
          justify-content: center;
          input {
            width: 122px;
            margin: 0 6px 0 0;
            box-sizing: border-box;
          }
          button {
            border: none;
            width: 122px;
            background-color: $bgcolor;
            color: #ffffff;
            font: {
              size: 13px;
            }
          ;
            border-radius: 2px;
            border: 1px solid $bgcolor;
          }
        }
        & > button {
          border: none;
          width: 250px;
          height: 43px;
          margin: 0 auto;
          background-color: $bgcolor;
          color: #ffffff;
          font: {
            size: 16px;
          }
        ;
        }
      }
    }
  }
</style>
